<template>
  <div>
    <el-dialog :visible.sync="visible" title="应用分组" width="900px">
      <el-button size="mini" style="float: right" type="primary" @click="openEdit({})">新增分组</el-button>
      <el-table :data="deployGroups" border size="mini">
        <el-table-column label="#ID" prop="id" width="50"/>
        <el-table-column label="分组名称" prop="name" width="200"/>
        <el-table-column label="分组展示名称" prop="showName" width="200"/>
        <el-table-column label="环境类型" prop="envType.name" width="100"/>
        <el-table-column label="代码分支" prop="gitBranch" width="100"/>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="openEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="onDeleteGroup(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <DeployGroupEditDialog ref="editDialog" @saveSuccess="loadList"/>
  </div>

</template>
<script>
import {deleteDeployGroupApi, deployGroupListApi} from "@/api/manage";
import DeployGroupEditDialog from "@/view/manage/appList/components/DeployGroupEditDialog";


export default {
  data() {
    return {
      visible: false,
      editVisible: false,
      appInfo: {},
      deployGroups: [],
    };
  },
  components: {DeployGroupEditDialog},
  methods: {
    open(appInfo) {
      this.appInfo = appInfo;
      this.loadList();
      this.visible = true;
    },
    loadList() {
      deployGroupListApi(this.appInfo.appName).then((d) => this.deployGroups = d);
    },
    openEdit(deployGroup) {
      this.$refs.editDialog.openEdit(this.appInfo, deployGroup);
    },
    onDeleteGroup(groupId) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDeployGroupApi(groupId).then(() => {
          this.$message({type: "success", message: "删除成功!"});
          this.loadList();
        });
      }).catch(() => {
        this.$message({type: "info", message: "已取消删除",});
      });
    },
  },
};
</script>